<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑按钮测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ddd; }
        button { margin: 5px; padding: 10px 15px; }
        .result { margin-top: 10px; padding: 10px; background: #f9f9f9; }
    </style>
</head>
<body>
    <h1>数据库配置编辑功能测试</h1>
    
    <div class="test-section">
        <h3>1. 测试获取配置接口</h3>
        <input type="text" id="configId" placeholder="输入配置ID" value="291d730e-af90-4ccc-a152-4f42f7984b3f">
        <button onclick="testGetConfig()">获取配置</button>
        <div class="result" id="getResult"></div>
    </div>
    
    <div class="test-section">
        <h3>2. 测试编辑功能</h3>
        <p>模拟编辑按钮点击：</p>
        <button data-id="291d730e-af90-4ccc-a152-4f42f7984b3f" onclick="editConfig(this)">编辑配置</button>
        <div class="result" id="editResult"></div>
    </div>

    <script>
        function testGetConfig() {
            const configId = document.getElementById('configId').value;
            const resultDiv = document.getElementById('getResult');
            
            resultDiv.innerHTML = '正在获取配置...';
            
            fetch('/database-config/' + configId)
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取配置失败: ' + response.status);
                }
                return response.json();
            })
            .then(config => {
                resultDiv.innerHTML = '<pre>' + JSON.stringify(config, null, 2) + '</pre>';
            })
            .catch(error => {
                resultDiv.innerHTML = '<span style="color: red;">错误: ' + error.message + '</span>';
            });
        }
        
        function editConfig(button) {
            const configId = button.getAttribute('data-id');
            const resultDiv = document.getElementById('editResult');
            
            resultDiv.innerHTML = '正在获取配置...';
            
            // 通过API获取配置信息
            fetch('/database-config/' + configId)
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取配置失败');
                }
                return response.json();
            })
            .then(config => {
                console.log('获取到配置:', config);
                
                resultDiv.innerHTML = '<h4>编辑功能测试成功！</h4>' +
                    '<p>获取到的配置信息：</p>' +
                    '<pre>' + JSON.stringify(config, null, 2) + '</pre>' +
                    '<p style="color: green;">✅ 编辑按钮可以正常获取配置信息</p>';
            })
            .catch(error => {
                console.error('编辑配置错误:', error);
                resultDiv.innerHTML = '<span style="color: red;">❌ 编辑功能失败: ' + error.message + '</span>';
            });
        }
    </script>
</body>
</html>